<template>
    <div class="dome">
        <div class="cropper">
            <img :src="img" class="img" @click="handleCropper"/>
            <!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 -->
            <h5-cropper ref="cropper" :option="option" hide-input @getbase64Data="getbase64Data"></h5-cropper>
        </div>
    </div>
</template>

<script>

  import H5Cropper from "vue-cropper-h5"

  const urlToFile = async (url) => {
    const response = await fetch(url)
    const blob = await response.blob()
    return new File([blob], "image", { type: blob.type })
  }


  export default {
    name: "CustomerAvatarCropper",
    components: { H5Cropper },
    props: {
      avatar: String,
    },
    data() {
      return {
        option: {
          ceilbutton: true,
          // original: true,
        },
        img: "http://h5.mallfoundry.com:8077/static/images/ae.png",
      }
    },
    methods: {
      getbase64Data(data) {
        this.img = data
      },
      handleCropper() {
        const { img } = this
        const { cropper } = this.$refs
        urlToFile(img)
          .then(file => cropper.loadFile(file))
      },
    },
  }
</script>

<style scoped>
    .dome {
        display: flex;
        justify-content: space-between;
        padding-left: 22px;
    }

    .cropper {
        width: 80px;
        height: 80px;
        line-height: 80px;
        /* 切记position: relative一定要有 */
        position: relative;
        border-radius: 80px;
        overflow: hidden;
        text-align: center;
    }

    .img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .info {
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        margin-left: 30px;
        flex: 1;
        text-align: left;
    }
</style>
